import React from 'react';
import { Row, Button, Table, Popconfirm, Icon as AntIcon, message, Typography } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import AuthComponent from '@/utils/auth/AuthComponent';
import { queryTagList, delTag } from './service';
import { FormHeader, Icon, Operates } from '../components';
import { TagModal } from './containers';

const titleStyle = { marginTop: 8, color: 'rgba(0, 0, 0, 0.3)' };
export default function Tag() {
    const { data, loading, run } = useRequest(queryTagList, {
        manual: true,
        initialValue: [],
        ...defaultFormatResult
    });
    React.useEffect(() => {
        run();
    }, []);
    const initModalState = { visible: false };
    const [modalState, setModalState] = React.useState(initModalState);
    const showModal = React.useCallback(
        dataId => {
            setModalState(state => ({ ...state, visible: true, dataId }));
        },
        [setModalState]
    );
    const columns = [
        {
            title: '标签名称',
            dataIndex: 'tagName',
            width: 200
        },
        {
            title: '规则',
            dataIndex: 'ruleDesc',
            width: '68%',
            render: text => (
                <Typography.Paragraph ellipsis={{ rows: 1, expandable: true }} style={{ marginBottom: 0 }}>
                    {text}
                </Typography.Paragraph>
            )
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            render: id => {
                const edit = (
                    <AuthComponent code="office:recruitment:setting:tag:update">
                        <Icon title="编辑" type="listfunction_edit_icon_default" onClick={() => showModal(id)} />
                    </AuthComponent>
                );
                const del = (
                    <AuthComponent code="office:recruitment:setting:tag:delete">
                        <Popconfirm
                            title="你确定要删除这行内容吗？"
                            onConfirm={() => {
                                delTag(id)
                                    .then(res => {
                                        const { code, msg } = res;
                                        if (code !== 10000) {
                                            message.error(msg);
                                            return;
                                        }
                                        message.success('操作成功');
                                        run();
                                    })
                                    .catch(e => console.error(e));
                            }}
                        >
                            <Icon title="删除" type="DeleteIcon" />
                        </Popconfirm>
                    </AuthComponent>
                );

                return <Operates operates={[edit, del]} spaceSplit></Operates>;
            }
        }
    ];
    return (
        <>
            <Row type="flex" align="middle">
                <div style={{ flex: 1, marginBottom: 12 }}>
                    <FormHeader title="标签管理" style={{ marginBottom: 0 }} />
                    <div style={titleStyle}>新增、修改标签将在第二天生效。</div>
                </div>
                <AuthComponent code="office:recruitment:setting:tag:create">
                    <Button type="primary" onClick={() => showModal()}>
                        <AntIcon type="plus" />
                        新增标签
                    </Button>
                </AuthComponent>
            </Row>

            <Table
                rowKey="id"
                bordered={false}
                dataSource={data}
                loading={loading}
                columns={columns}
                pagination={false}
            />
            <TagModal
                {...modalState}
                onOk={() => {
                    setModalState({ ...initModalState });
                    message.success('操作成功');
                    run();
                }}
                onCancel={() => {
                    setModalState({ ...initModalState });
                }}
            />
        </>
    );
}
